import React from "react"


import { Carousel, WingBlank } from 'antd-mobile';

class Swip extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
  componentDidMount() {
    // console.log(this.props)
    this.props.getImgBanner().then(res=>{
      // console.log(res.data.banners)
      this.setState({
        data:res.data.banners
      })
    })
  }
  
  render() {
   
    let {data} =this.state
    // console.log(data)
    return (
      <WingBlank>
        <Carousel
          autoplay={true}
          infinite={true}
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
        >
          {data.map(val => (
            <a
              key={val}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.imageUrl}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}

export default Swip